/* 与ui设计稿对应的色值序号, 不包括透明度 */
$--colour0: #FFF;
$--colour1: #F4F5F9; // rgb(244,245,249) 近白色
$--colour2: #E1E3E7;
$--colour3: #191C22;
$--colour4: #4D9BD5; // rgb(77,155,213) // 矢车菊蓝
$--colour5: #46A76B;
$--colour6: #F4AB32;
$--colour7: #D46E6E;
$--color8: #F7FBFF; // rgb(247, 251, 255) 轻蓝

/* 所有disabled的状态下按钮蒙层的透明度 */
$--mask: .4;

/* 圆角标签 */
$--radius: 4px;

/* 基础色值 */
$white: $--colour0;
$gray: $--colour2;
$light-gray: $--colour1;
$black: $--colour3;
$blue: $--colour4;
$light-blue: $--color8;
$green: $--colour5;
$yellow: $--colour6;
$red: $--colour7;

/* 基础字号 */
$fontsize__medium: 1.4rem;
$fontsize__small: 1.2rem;
$fontsize__large: 1.6rem;

// sidebar
$menuText: rgba($--colour3, 0.8); // 菜单字色
$menuActiveText: $--colour4; // 选中菜单的字色
$subMenuActiveText: $--colour4; // 选中子菜单的字色
$menuBg: $white; // 左侧菜单背景颜色
$menuHover: rgba($--colour4, 0.2); // 菜单hover背景色
$subMenuBg: $--colour1; // 子菜单背景色
$subMenuHover: rgba($--colour4, 0.2); // 子菜单hover背景色
$sideBarWidth: 240px; // 还原
$topHeight: 6rem; // LOGO与顶部栏高度
$hoverBg: rgba($--colour3, 0.05);  // item条目悬浮颜色
$activedBg: rgba($--colour4, 0.1); // item条目选中颜色

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  activeBg: $activedBg;
  hoverBg: $hoverBg;
}
